<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@include file="/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/interface/flowaudithistoryService.js'></script>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/interface/flowtemplatedetailService.js'></script>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/interface/flowtemplatebranchService.js'></script>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/engine.js'></script>
	<script type='text/javascript' src='${pageContext.request.contextPath}/dwr/util.js'></script>
	<script type="text/javascript">
		//判断下一个节点的坐标及宽高，算法：总宽度是600，高每行50算（总高度无限制），节点包括角色（包含标识语）和箭头两种
		//角色宽高50x50，箭头80x50；箭头包括向右和向左灰色绿色两种
		//想→还是向←；一层一层分支；当前图的总高，总宽；当前坐标；下一坐标；分支坐标和主线坐标，只有两层不从在分支后还有分支情况
		//分支占主线各半（以主线为中点上下分开，有奇偶之分）
		//分支节点出现在最右端（特例）或者分支被边线拦截（尽量在一行中布局所有分支（分支不超过8个节点））
			var totalWidth = "600px";//10步以上（包含分支）的需要拐弯
			var perHeight = "50px";
			var perWidth = "50px";
			var curWidth = "50px";//当前宽度
			var curHeight = "";//当前高度 最少分3层（无分支、步骤在10步以内）
			var leftValue = "100px";//左边距
			var topValue = "100px";//
			var curX = "";//前一主流程节点坐标
			var curY = "";
			var curBranchX = "";//分支坐标
			var curBranchY = "";//
			var nextX = "";
			var nextY = "";
			var ch_r = true;//向右
			
			var img0_src = "../image/begin0.jpg";//角色0 开始
			var img1_src = "../image/rule1.jpg";//角色1 绿人	增加带分支标识（路由）的图片
			var img2_src = "../image/rule0.jpg";//角色2 灰人
			var img3_src = "../image/rule1.jpg";//角色3 红人
			var img4_src = "";//角色4 灰结束
			var img5_src = "";//角色5 绿结束
			var img6_src = "";//箭头6 向→
			var img7_src = "";//箭头7 向↓
			var img8_src = "";//箭头8 向←
			var img9_src = "";//箭头9 向↙
			var img10_src = "";//箭头10 向↘
			var img11_src = "";//箭头11 向↗
			var img12_src = "";//箭头12 向↖
			var img13_src = "";//箭头13 长箭头
			var flow_s = document.getElementById("flow");
			
		function updateCurXY() {
		//只处理直线和一次回转的情况，节点控制在10步以内
			//如果ch_r = true判断如下
			//如果是totalWidth - curWidth - leftValue < perWidth * 4，小于4个方格返回
			//如果是totalWidth - curWidth - leftValue <= perWidth * 3，小于两个方格返回
			//返回 nextX = curX - 50;nextY = curY + 50;ch_r = false; 
			//如果当前节点状态为完成 返回nextX = curX nextY = curY + 50 ;
			//返回curX += 50; curY 不变 ;
			
			//if(ch_r == false) 
			//if(curX - leftValue < 200)开始节点前错开1步，返回 curX 
		}
		
			
	
		//实例对象，单子 标识、单号（）供查询；
		function initTable() {
			
			flowtemplatedetailService.findAllFlowtemplatedetailWith(
				${flowworkitem.workflowno},
				function(data){
					//创建开始图片 决定流程起始位置 初始化数据
					var div_0 = createDiv("div_0",leftValue,topValue,perWidth,perHeight) ;
					var img_0 = createImg("img_0",img0_src,perWidth,perHeight);
					var br_0 = document.createElement("br");//换行
					var s0Name = document.createTextNode("开始");//标识语
					div_0.appendChild(img_0);
					div_0.appendChild(br_0);
					div_0.appendChild(s0Name);
					flow_s.appendChild(div_0);
					curWidth = leftValue + perWidth;//parseInt()
					curHeight = topValue + perHeight;
					curX = leftValue;
					curY = topValue;
					
					//获取数据
					for(var i=0;i<data.length;i++){
						//获取数据
						var workflowid = data[i][0];//编号
						var seq = data[i][1];//步骤编号
						var status = data[i][2];//状态名
						var deptname = data[i][3];//部门名
						var rulename = data[i][4];//角色名
						var branch = data[i][5];//分支状态
						
						//创建箭头 判断箭头方向及图片坐标x，y该加该减；
						/*
							规则：
							当前宽度 = 左边距 + 已填充方格数 * 单位宽度
							当前高度 = 顶距 + 纵向填充方格数 × 单位宽度
							以下求nextX，nextY值，并相应修改当前宽度和当前高度，及curX,curY
							
							方向向→
							④curX 小于总宽-4个单位宽度，y不变 x+单位宽度，箭头→，节点x+2，y不变
							③curX 大于等于总宽-4个单位宽度，且i = data.length - 1，箭头→，x+，y不变；节点x+2，y不变
							②curX 大于等于总宽-4个单位宽度，且i < data.length - 1，箭头↘，x+，y+1/2；节点x+2，y+
							①curX 大于等于总宽-2个单位宽度，箭头↙，x-，y+1/2；节点x-2，y+，改变方向标志向←
							
							方向向←
							①curX 大于左边距 + 4个单位宽度，y不变 x-单位宽度，箭头←，节点x-2，y不变
							②curX 小于等于左边距 + 4个单位宽度，且i = data.length - 1，箭头←，x-，y不变；节点x-2，y不变
							③curX 小于等于左边距 + 4个单位宽度，且i < data.length - 1，箭头↙，x-，y+1/2；节点x-2，y+
							④curX 小于等于左边距 + 2个单位宽度，箭头↘，x+，y+1/2；节点x+2，y+，改变方向标志向→
						    
						    
						    特殊情况：分支再重合点双箭头，当前i != 0 ,判断data[i-1][5]的值是否标识有分支，画双箭头（方向）
						
						    分支情况：（1、2个分支，且分支总长不超过总宽）独立的分支流
						   var branch_select = [][];
							
						*/
						/*
						//画箭头,节点
						if(ch_r){//方向向→
							if(curX >= totalWidth - perWidth * 2){//①
								//箭头
								var div_1 = createDiv("divJT_" + (i + 1),curX - perWidth,curY +　perHeight * 1/2,perWidth,perHeight) ;
								var img_1 = createImg("img1_" + (i + 1),img9_src,perWidth,perHeight);
								var br_1 = document.createElement("br");//换行
								div_1.appendChild(img_1);
								div_1.appendChild(br_1);
								
								flow_s.appendChild(div_1);
								
								//节点
								var img_2;
								var div_2 = createDiv("divJD_" + (i + 1),curX - perWidth * 2,curY +　perHeight,perWidth,perHeight) ;
								
								if(seq == ${curseq}) {//红色
									img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
								}else if(seq < ${curseq}) {//绿色
									img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
								}else{//灰色
									img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
								}
								var sName2 = document.createTextNode(rulename);//标识语
								var br_2 = document.createElement("br");//换行
								
								div_2.appendChild(img_2);
								div_2.appendChild(br_2);
								div_2.appendChild(sName2);
								
								flow_s.appendChild(div_2);
								
								//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
								ch_r = fasle;
								curX -= perWidth * 2;
								curY +=　perHeight;
							}else if (curY >= totalWidth - perWidth * 4){
								if(i == data.length - 1) {//③
									//箭头
									var div_1 = createDiv("divJT_" + (i + 1),curX + perWidth,curY ,perWidth,perHeight) ;
									var img_1 = createImg("img1_" + (i + 1),img6_src,perWidth,perHeight);
									var br_1 = document.createElement("br");//换行
									div_1.appendChild(img_1);
									div_1.appendChild(br_1);
									
									flow_s.appendChild(div_1);
									
									//节点
									var img_2;
									var div_2 = createDiv("divJD_" + (i + 1),curX + perWidth * 2,curY ,perWidth,perHeight) ;
									
									if(seq == ${curseq}) {//红色
										img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
									}else if(seq < ${curseq}) {//绿色
										img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
									}else{
										img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
									}
									var sName2 = document.createTextNode(rulename);//标识语
									var br_2 = document.createElement("br");//换行
									
									div_2.appendChild(img_2);
									div_2.appendChild(br_2);
									div_2.appendChild(sName2);
									
									flow_s.appendChild(div_2);
									
									//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
									curX += perWidth * 2;
								}else {//②②curX 大于等于总宽-4个单位宽度，且i < data.length - 1，箭头↘，x+，y+1/2；节点x+2，y+
									//箭头
									var div_1 = createDiv("divJT_" + (i + 1),curX + perWidth,curY +　perHeight * 1/2,perWidth,perHeight) ;
									var img_1 = createImg("img1_" + (i + 1),img10_src,perWidth,perHeight);
									var br_1 = document.createElement("br");//换行
									div_1.appendChild(img_1);
									div_1.appendChild(br_1);
									
									flow_s.appendChild(div_1);
									
									//节点
									var img_2;
									var div_2 = createDiv("divJD_" + (i + 1),curX + perWidth * 2,curY +　perHeight,perWidth,perHeight) ;
									
									if(seq == ${curseq}) {//红色
										img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
									}else if(seq < ${curseq}) {//绿色
										img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
									}else{
										img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
									}
									var sName2 = document.createTextNode(rulename);//标识语
									var br_2 = document.createElement("br");//换行
									
									div_2.appendChild(img_2);
									div_2.appendChild(br_2);
									div_2.appendChild(sName2);
									
									flow_s.appendChild(div_2);
									
									//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
									curX += perWidth * 2;
									curY +=　perHeight;
								}
							}else {//④curX 小于总宽-4个单位宽度，y不变 x+单位宽度，箭头→，节点x+2，y不变
								//箭头
								var div_1 = createDiv("divJT_" + (i + 1),curX + perWidth,curY ,perWidth,perHeight) ;
								var img_1 = createImg("img1_" + (i + 1),img6_src,perWidth,perHeight);
								var br_1 = document.createElement("br");//换行
								div_1.appendChild(img_1);
								div_1.appendChild(br_1);
								
								flow_s.appendChild(div_1);
								
								//节点
								var img_2;
								var div_2 = createDiv("divJD_" + (i + 1),curX + perWidth * 2,curY ,perWidth,perHeight) ;
								
								if(seq == ${curseq}) {//红色
									img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
								}else if(seq < ${curseq}) {//绿色
									img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
								}else{
									img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
								}
								var sName2 = document.createTextNode(rulename);//标识语
								var br_2 = document.createElement("br");//换行
								
								div_2.appendChild(img_2);
								div_2.appendChild(br_2);
								div_2.appendChild(sName2);
								
								flow_s.appendChild(div_2);
								
								//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
								curX += perWidth * 2;
							}
						}else{方向向← 
							if(curX > leftValue + perWidth * 4) {//①curX 大于左边距 + 4个单位宽度，y不变 x-单位宽度，箭头←，节点x-2，y不变
								//箭头
								var div_1 = createDiv("divJT_" + (i + 1),curX - perWidth,curY ,perWidth,perHeight) ;
								var img_1 = createImg("img1_" + (i + 1),img8_src,perWidth,perHeight);
								var br_1 = document.createElement("br");//换行
								div_1.appendChild(img_1);
								div_1.appendChild(br_1);
								
								flow_s.appendChild(div_1);
								
								//节点
								var img_2;
								var div_2 = createDiv("divJD_" + (i + 1),curX - perWidth * 2,curY ,perWidth,perHeight) ;
								
								if(seq == ${curseq}) {//红色
									img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
								}else if(seq < ${curseq}) {//绿色
									img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
								}else{//灰色
									img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
								}
								var sName2 = document.createTextNode(rulename);//标识语
								var br_2 = document.createElement("br");//换行
								
								div_2.appendChild(img_2);
								div_2.appendChild(br_2);
								div_2.appendChild(sName2);
								
								flow_s.appendChild(div_2);
								
								//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
								//ch_r = fasle;
								curX -= perWidth * 2;
								//curY +=　perHeight;
							}else if(curX <= leftValue + perWidth * 4) {
								if(i == data.length - 1) {//②curX 小于等于左边距 + 4个单位宽度，且i = data.length - 1，箭头←，x-，y不变；节点x-2，y不变
									//箭头
									var div_1 = createDiv("divJT_" + (i + 1),curX - perWidth,curY ,perWidth,perHeight) ;
									var img_1 = createImg("img1_" + (i + 1),img8_src,perWidth,perHeight);
									var br_1 = document.createElement("br");//换行
									div_1.appendChild(img_1);
									div_1.appendChild(br_1);
									
									flow_s.appendChild(div_1);
									
									//节点
									var img_2;
									var div_2 = createDiv("divJD_" + (i + 1),curX - perWidth * 2,curY ,perWidth,perHeight) ;
									
									if(seq == ${curseq}) {//红色
										img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
									}else if(seq < ${curseq}) {//绿色
										img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
									}else{//灰色
										img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
									}
									var sName2 = document.createTextNode(rulename);//标识语
									var br_2 = document.createElement("br");//换行
									
									div_2.appendChild(img_2);
									div_2.appendChild(br_2);
									div_2.appendChild(sName2);
									
									flow_s.appendChild(div_2);
									
									//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
									//ch_r = fasle;
									curX -= perWidth * 2;
									//curY +=　perHeight;
								}else {//③curX 小于等于左边距 + 4个单位宽度，且i < data.length - 1，箭头↙，x-，y+1/2；节点x-2，y+
									//箭头
									var div_1 = createDiv("divJT_" + (i + 1),curX - perWidth,curY + perHeight * 1/2 ,perWidth,perHeight) ;
									var img_1 = createImg("img1_" + (i + 1),img9_src,perWidth,perHeight);
									var br_1 = document.createElement("br");//换行
									div_1.appendChild(img_1);
									div_1.appendChild(br_1);
									
									flow_s.appendChild(div_1);
									
									//节点
									var img_2;
									var div_2 = createDiv("divJD_" + (i + 1),curX - perWidth * 2,curY + perHeight ,perWidth,perHeight) ;
									
									if(seq == ${curseq}) {//红色
										img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
									}else if(seq < ${curseq}) {//绿色
										img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
									}else{//灰色
										img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
									}
									var sName2 = document.createTextNode(rulename);//标识语
									var br_2 = document.createElement("br");//换行
									
									div_2.appendChild(img_2);
									div_2.appendChild(br_2);
									div_2.appendChild(sName2);
									
									flow_s.appendChild(div_2);
									
									//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
									//ch_r = fasle;
									curX -= perWidth * 2;
									curY +=　perHeight;
								}
							}else {//④curX 小于等于左边距 + 2个单位宽度，箭头↘，x+，y+1/2；节点x+2，y+，改变方向标志向→
								//箭头
								var div_1 = createDiv("divJT_" + (i + 1),curX + perWidth,curY + perHeight * 1/2 ,perWidth,perHeight) ;
								var img_1 = createImg("img1_" + (i + 1),img10_src,perWidth,perHeight);
								var br_1 = document.createElement("br");//换行
								div_1.appendChild(img_1);
								div_1.appendChild(br_1);
								
								flow_s.appendChild(div_1);
								
								//节点
								var img_2;
								var div_2 = createDiv("divJD_" + (i + 1),curX + perWidth * 2,curY + perHeight ,perWidth,perHeight) ;
								
								if(seq == ${curseq}) {//红色
									img_2 = createImg("img2_" + (i + 1),img3_src,perWidth,perHeight);
								}else if(seq < ${curseq}) {//绿色
									img_2 = createImg("img2_" + (i + 1),img1_src,perWidth,perHeight);
								}else{//灰色
									img_2 = createImg("img2_" + (i + 1),img2_src,perWidth,perHeight);
								}
								var sName2 = document.createTextNode(rulename);//标识语
								var br_2 = document.createElement("br");//换行
								
								div_2.appendChild(img_2);
								div_2.appendChild(br_2);
								div_2.appendChild(sName2);
								
								flow_s.appendChild(div_2);
								
								//修改数据curX ,curY ,curWidth ,curHeight ,ch_r 
								ch_r = true;
								curX += perWidth * 2;
								curY +=　perHeight;
							}
						}
						
						*/
						
						
						//判断是否存在分支进入分支处理阶段 
						if(branch == "Y") {//有分支
							//可在这里画路由图示
							flowtemplatebranchService.findAllFlowtemplatebranchWith(){
								workflowid,
								function(data2){
									//处理分支情况、获取分支数据 ;每个分支1条流程 与主流程150差距；且各分支流程间差100；每个分支用子卡类型标识
									//根据子卡类型划分支（分析分支数量，位置）
									/*
									规则：分支安卡类型分组，按branchseq排序（有默认分支（必须有固定的子卡类型））
									逢branchseq = 1 换行 curBranchY += 100 各行前需有类型标识; curBranchX = leftValue; curBranchY = curY + 100px;
									分支走完之后需要修改curY的值
									*/
									for(var j = 0;j<data2.length;j++) {
										
									}
									
									
								}
							};
							//在分支结束时在新的起点画路由图示，表示接前
						}
					}
					
					//创建结束标识、直接结束、垂直箭头
					var div_2 = document.createElement("div");
					var img_4 = document.createElement("IMG");
					var img_2 = document.createElement("IMG");
					var br_2 = document.createElement("br");//换行
					img_2.id = "img_e";//开始
					
					if("完成" == ${curstatusname}） {
						img_2.src = "../image/finish1.jpg";//绿色
					}else if("作废" == ${curstatusname}){
						img_2.src = "../image/finish0.jpg";//红色
					}else {
						img_2.src = "../image/finish0.jpg";//灰色
					}
					
					img_4.src = "../image/down0.jpg";//根据状态创建图片
					
					var s2Name = document.createTextNode("结束");//标识语
					div_2.id = "div_e";
					div_2.appendChild(img_4);
					div_2.appendChild(img_2);
					div_2.appendChild(br_2);
					div_2.appendChild(s2Name);
					div_2.style.fontSize="12px";
					div_2.style.border="0px solid #333333";
					div_2.style.position = "absolute";
					div_2.style.height="150px";
					div_2.style.width="30px";
					div_2.style.left = (parseInt(document.getElementById("div_" + data.length).style.left) ) + "px";//图片位置
					div_2.style.top = "250px";
					flow_s.appendChild(div_2);
				}
			);
		}
		
		function createDiv(s_id,s_left,s_top,s_width,s_height) {
			var s_div = document.createElement("div");
			s_div.id = s_id + "";
			s_div.style.fontSize="12px";
			s_div.style.border="0px solid #333333";
			s_div.style.position = "absolute";
			s_div.style.height= parseInt(s_height);
			s_div.style.width= parseInt(s_width);
			s_div.style.left = parseInt(s_left);//图片位置
			s_div.style.top = parseInt(s_top);
			
			return s_div;
		}
		
		function createImg(i_id,i_src,i_width,i_height) {
			var s_img = document.createElement("img");
			s_img.id = i_id ;
			s_img.src = i_src;
			s_img.style.width = parseInt(i_width);
			s_img.style.height = parseInt(i_height);
			return s_img;
		}
		
	</script>
	<title>xx</title>
	</head>

	<body bgcolor="#ccddee" link="#000066" vlink="#0066FF" alink="#99FF00" onload="initTable()">
		<div >
			<fieldset><legend>流程步骤图示</legend>
			<div id="flow" ></div>
			</fieldset>
		</div>
		
	</body>
</html>
